<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Account</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script>
Account = top.Tian.Class(top.Tian.Embeded, {
    dictionaries: {
        'en': {
            'signin_header': 'Sign in to system',
            'signin_user_label': 'User name',
            'signin_pass_label': 'Password',
            'signin_button': 'Sign in',
            'signin_forget': 'Forget password',
            'signin_create': 'Create new account',
            'signin_error_invalid': 'User name or password error.',
            'signin_error_inactive': 'Account is not activated.',
            
            'forget_header': 'Forget password',
            'forget_user_label': 'User name',
            'forget_mail_label': 'Email address',
            'forget_button': 'Submit',
            'forget_signin': 'Sign in to system',
            'forget_error_invalid': 'User name or email address error.',
            'forget_error_inactive': 'Account is not activated.',
            'forget_reset_password': 'Please check your email and reset password of this account.',
            
            'create_header': 'Create new account',
            'create_user_label': 'User name (6 - 30 characters)',
            'create_pass_label': 'Password (6 - 30 characters)',
            'create_conf_label': 'Confirm password',
            'create_mail_label': 'Email (Can not be modified after creation)',
            'create_button': 'Create',
            'create_signin': 'Sign in to system',
            'create_error_user': 'Invalid user name.',
            'create_error_pswd': 'Invalid password.',
            'create_error_mail': 'Invalid email address.',
            'create_error_sum': 'Invalid answer.',
            'create_error_used': 'User name or email address is used.',
            'create_activate_account': 'Your account has been created successfully. Please check your email and activate this account.',
            
            'logout_header': 'Account Information',
            'logout_user_label': 'User name',
            'logout_email_label': 'Email address',
            'logout_balance_label': 'Points',
            'logout_apps_label': 'Application count',
            'logout_devices_label': 'Device count',
            'logout_layers_label': 'Map layer count',
            'logout_features_label': 'Geofeature count',
            'logout_button': 'Sign out',
            'logout_edit': 'Reset password',
            'logout_error_illegal': 'Illegal account.',
            'logout_error_inactive': 'Account is not activated.',
            'logout_error_token': 'Your token has expired.',
            
            'edit_header': 'Reset password',
            'edit_pass_label': 'New password (6 - 30 characters)',
            'edit_conf_label': 'Confirm password',
            'edit_mail_label': 'Email address',
            'edit_button': 'Submit',
            'edit_cancel': 'Go back',
            'edit_error_pswd': 'Invalid password.',
            'edit_error_illegal': 'Illegal account.',
            'edit_error_inactive': 'Account is not activated.',
            'edit_error_token': 'Your token has expired. Please sign in again.',
            'edit_updated': 'Success, your password has been updated.',
            
            'processing': 'Processing...',
            'system_error': 'System error: ',
            'unknown_error': 'Unknown error.'
        },
        'zh-CN' : {
            'signin_header': '登录系统',
            'signin_user_label': '用户名',
            'signin_pass_label': '密码',
            'signin_button': '登录',
            'signin_forget': '忘记密码',
            'signin_create': '创建新用户',
            'signin_error_invalid': '用户名或密码错误。',
            'signin_error_inactive': '用户还没有被激活。',
            
            'forget_header': '忘记密码',
            'forget_user_label': '用户名',
            'forget_mail_label': '电子邮箱地址',
            'forget_button': '提交',
            'forget_signin': '登录系统',
            'forget_error_invalid': '用户名或电子邮箱地址错误。',
            'forget_error_inactive': '用户还没有被激活。',
            'forget_reset_password': '请检查您的电子邮箱并按邮件提示修改密码。',
            
            'create_header': '创建新用户',
            'create_user_label': '用户名 (6 - 30 英文字符或数字)',
            'create_pass_label': '密码 (6 - 30 英文字符或数字)',
            'create_conf_label': '重复密码',
            'create_mail_label': '电子邮箱地址 (创建后不可修改)',
            'create_button': '创建',
            'create_signin': '登录系统',
            'create_error_user': '无效的用户名。',
            'create_error_pswd': '无效的密码。',
            'create_error_mail': '无效的电子邮箱地址。',
            'create_error_sum': '无效的答案。',
            'create_error_used': '用户名或电子邮箱地址已被使用。',
            'create_activate_account': '您的用户已成功创建。请检查您的电子邮箱并按邮件提示激活用户。',
            
            'logout_header': '用户信息',
            'logout_user_label': '用户名',
            'logout_email_label': '电子邮箱地址',
            'logout_balance_label': '积分',
            'logout_apps_label': '应用数量',
            'logout_devices_label': '设备数量',
            'logout_layers_label': '地图层数量',
            'logout_features_label': '地理资源数量',
            'logout_button': '登出',
            'logout_edit': '修改密码',
            'logout_error_illegal': '非法用户。',
            'logout_error_inactive': '用户还没有被激活。',
            'logout_error_token': '您的令牌已过期。',
            
            'edit_header': '修改密码',
            'edit_pass_label': '新密码 (6 - 30 英文字符或数字)',
            'edit_conf_label': '重复新密码',
            'edit_mail_label': '电子邮箱地址',
            'edit_button': '提交',
            'edit_cancel': '返回',
            'edit_error_pswd': '无效的密码。',
            'edit_error_illegal': '非法用户。',
            'edit_error_inactive': '用户还没有被激活。',
            'edit_error_token': '您的令牌已过期，请重新登录。',
            'edit_updated': '恭喜，您的密码已更新。',
            
            'processing': '处理中……',
            'system_error': '系统错误：',
            'unknown_error': '未知错误。'
        }
    },
    
    randsum: 0,
    
    onRun: function () {
        top.Tian.Embeded.prototype.onRun.apply(this, arguments);
        
        this.setLanguage();
        this.attachEvents();
        // check account status
        if (this.getOS().getAccount()) {
            this.showBox('#logout_box');
        } else {
            this.showBox('#signin_box');
        }
    },
    
    destroy: function () {
        // remove event listeners
        $('input').unbind();
        this.getOS().getEvents().unregister('socketwedata', this, this.onSocketWeData);
        
        top.Tian.Embeded.prototype.destroy.apply(this, arguments);
    },
    
    setLanguage: function() {
        $('#signin_header').text(this.i18n('signin_header'));
        $('#signin_user_label').text(this.i18n('signin_user_label'));
        $('#signin_pass_label').text(this.i18n('signin_pass_label'));
        $('#signin_button').val(this.i18n('signin_button'));
        $('#signin_forget').val(this.i18n('signin_forget'));
        $('#signin_create').val(this.i18n('signin_create'));
        
        $('#forget_header').text(this.i18n('forget_header'));
        $('#forget_user_label').text(this.i18n('forget_user_label'));
        $('#forget_mail_label').text(this.i18n('forget_mail_label'));
        $('#forget_button').val(this.i18n('forget_button'));
        $('#forget_signin').val(this.i18n('forget_signin'));
        
        $('#create_header').text(this.i18n('create_header'));
        $('#create_user_label').text(this.i18n('create_user_label'));
        $('#create_pass_label').text(this.i18n('create_pass_label'));
        $('#create_conf_label').text(this.i18n('create_conf_label'));
        $('#create_mail_label').text(this.i18n('create_mail_label'));
        $('#create_button').val(this.i18n('create_button'));
        $('#create_signin').val(this.i18n('create_signin'));
        
        $('#logout_header').text(this.i18n('logout_header'));
        $('#logout_user_label').text(this.i18n('logout_user_label'));
        $('#logout_email_label').text(this.i18n('logout_email_label'));
        $('#logout_balance_label').text(this.i18n('logout_balance_label'));
        $('#logout_apps_label').text(this.i18n('logout_apps_label'));
        $('#logout_devices_label').text(this.i18n('logout_devices_label'));
        $('#logout_layers_label').text(this.i18n('logout_layers_label'));
        $('#logout_features_label').text(this.i18n('logout_features_label'));
        $('#logout_button').val(this.i18n('logout_button'));
        $('#logout_edit').val(this.i18n('logout_edit'));
        
        $('#edit_header').text(this.i18n('edit_header'));
        $('#edit_pass_label').text(this.i18n('edit_pass_label'));
        $('#edit_conf_label').text(this.i18n('edit_conf_label'));
        $('#edit_mail_label').text(this.i18n('edit_mail_label'));
        $('#edit_button').val(this.i18n('edit_button'));
        $('#edit_cancel').val(this.i18n('edit_cancel'));
    },
    
    showBox: function(id) {
        $('.box').hide();
        
        var account = this.getOS().getAccount();
        
        switch (id) {
        case '#signin_box':
            $('#signin_box input[type!=button]').val('');
            $('#signin_info').text('');
            break;
        case '#logout_box':
            $('#logout_info').text('');
            this.refreshAccountInfo();
            break;
        case '#create_box':
            $('#create_box input[type!=button]').val('');
            $('#create_info').text('');
            this.resetRandSum();
            break;
        case '#forget_box':
            $('#forget_box input[type!=button]').val('');
            $('#forget_info').text('');
            break;
        case '#edit_box':
            if (account) {
                $('#edit_mail').val(account.email);
            }
            $('#edit_pass, #edit_conf').val('');
            $('#edit_info').text('');
            break;
        }
        
        $(id).show();
    },
    
    refreshAccountInfo: function() {
        var account = this.getOS().getAccount();
        if (account) {
                $('#logout_user').text(account.user);
                $('#logout_email').text(account.email);
                $('#logout_balance').text(account.money || 0);
                $('#logout_apps').text((account.apps && account.apps.length) || 0);
                $('#logout_devices').text((account.devices && account.devices.length) || 0);
                $('#logout_layers').text((account.layers && account.layers.length) || 0);
                $('#logout_features').text((account.features && account.features.length) || 0);
        }
    },
    
    onSelect: function() {
        top.Tian.Embeded.prototype.onSelect.apply(this, arguments);
        this.refreshAccountInfo();
    },
    
    attachEvents: function() {
        // views
        $("#signin_forget").click(function(app) {return function(){app.showBox('#forget_box');}}(this));
        $("#signin_create").click(function(app) {return function(){app.showBox('#create_box');}}(this));
        $("#forget_signin").click(function(app) {return function(){app.showBox('#signin_box');}}(this));
        $("#create_signin").click(function(app) {return function(){app.showBox('#signin_box');}}(this));
        $("#logout_edit").click(function(app) {return function(){app.showBox('#edit_box');}}(this));
        $("#edit_cancel").click(function(app) {return function(){app.showBox('#logout_box');}}(this));
        
        // buttons
        $("#signin_button").click(top.Tian.Function.bind(this.onSignIn, this));
        $("#forget_button").click(top.Tian.Function.bind(this.onForget, this));
        $("#create_button").click(top.Tian.Function.bind(this.onCreate, this));
        $("#logout_button").click(top.Tian.Function.bind(this.onSignOut, this));
        $("#edit_button").click(top.Tian.Function.bind(this.onEdit, this));
        
        $('#signin_box input[type!=button]').bind('keypress', function(event) {
            if (event.which==13) {
                event.preventDefault();
                $('#signin_button').click();
            }
        });
        $('#forget_box input[type!=button]').bind('keypress', function(event) {
            if (event.which==13) {
                event.preventDefault();
                $('#forget_button').click();
            }
        });
        $('#create_box input[type!=button]').bind('keypress', function(event) {
            if (event.which==13) {
                event.preventDefault();
                $('#create_button').click();
            }
        });
        $('#edit_box input[type!=button]').bind('keypress', function(event) {
            if (event.which==13) {
                event.preventDefault();
                $('#edit_button').click();
            }
        });
        
        this.getOS().getEvents().register('socketwedata', this, this.onSocketWeData);
    },
    
    check: function(type, str) {
        var userRegEx   = /^[a-zA-Z0-9_-]{6,30}$/;
        
        switch(type) {
        case 'user':
            return userRegEx.test(str);
        case 'pswd':
            return (str.length>5 && str.length<31);
        case 'email':
            return top.Tian.String.isEmail(str);
        default:
            return false;
        }
        
        return false;
    },
    
    resetRandSum: function() {
        var ran1 = Math.floor(10*Math.random());
        var ran2 = Math.floor(10*Math.random());
        $('#create_rand_1').text(ran1);
        $('#create_rand_2').text(ran2);
        if (ran1%2) {
            document.getElementById('create_method').innerHTML = '+';
            this.randsum = ran1 + ran2;
        } else {
            document.getElementById('create_method').innerHTML = '&times;';
            this.randsum = ran1 * ran2;
        }
        $('#create_rand_sum').val('');
    },
    
    onSignIn: function() {
        // disable the button
        $('#signin_box input').attr('disabled', 'disabled');
        $('#signin_info').text('');
        
        var user = $('#signin_user').val(),
            pswd = $('#signin_pass').val();
        
        if (this.check('user', user) && this.check('pswd', pswd)) {
            this.getOS().getEvents().triggerEvent('wedata', {wedata: {
                type: 'accountsignin',
                user: user,
                pswd: top.Tian.md5(pswd)
            }});
        } else {
            $('#signin_info').text(this.i18n('signin_error_invalid'));
            $('#signin_box input').removeAttr('disabled');
        }
    },
    
    onSignInFeedback: function(data) {
        // check status code
        switch (data.status) {
        case 0: // processing
            $('#signin_info').text(this.i18n('processing'));
            return;
        case 1: // db error
            $('#signin_info').text(this.i18n('system_error') + data.status);
            break;
        case 2: // invald user/password
        case 3: // invald user/password
            $('#signin_info').text(this.i18n('signin_error_invalid'));
            break;
        case 4: // not activated
            $('#signin_info').text(this.i18n('signin_error_inactive'));
            break;
        case 5: // db error
            $('#signin_info').text(this.i18n('system_error') + data.status);
            break;
        case 6: // passed
            this.getOS().getEvents().triggerEvent('signin', {account: data.account});
            this.showBox('#logout_box');
            break;
        default:
            $('#signin_info').text(this.i18n('unknown_error'));
        }
        $('#signin_box input').removeAttr('disabled');
    },
    
    onSignOut: function() {
        $('#logout_info').text('');
        
        var account = this.getOS().getAccount();
        if (account) {
            this.getOS().getEvents().triggerEvent('wedata', {wedata: {
                type: 'accountlogout',
                user: account.user,
                token: account.token
            }});
        }
        
        // do not need feedback
        this.getOS().getEvents().triggerEvent('signout');
        this.showBox('#signin_box');
    },
    
    onSignOutFeedback: function(data) {
        // check status code
        /*switch (data.status) {
        case 0: // processing
            $('#logout_info').text(this.i18n('processing'));
            return;
        case 1: // db error
            $('#logout_info').text(this.i18n('system_error') + data.status);
            break;
        case 2: // invald user
            $('#logout_info').text(this.i18n('logout_error_illegal'));
        case 3: // not activated
            $('#logout_info').text(this.i18n('logout_error_inactive'));
            break;
        case 4: // token expired
            $('#logout_info').text(this.i18n('logout_error_token'));
            break;
        case 5: // db error
            $('#logout_info').text(this.i18n('system_error') + data.status);
            break;
        case 6: // passed
            this.getOS().getEvents().triggerEvent('signout');
            this.showBox('#signin_box');
            break;
        default:
            $('#logout_info').text(this.i18n('unknown_error'));
        }
        $('#logout_box input').removeAttr('disabled');*/
    },
    
    onForget: function() {
        $('#forget_box input').attr('disabled', 'disabled');
        $('#forget_info').text('');
        
        var user = $('#forget_user').val(),
            mail = $('#forget_mail').val();
        
        if (this.check('user', user) && this.check('email', mail)) {
            this.getOS().getEvents().triggerEvent('wedata', {wedata: {
                type: 'accountforget',
                user: user,
                email: mail,
                lang: top.Tian.Lang.getCode()
            }});
        } else {
            $('#forget_info').text(this.i18n('forget_error_invalid'));
            $('#forget_box input').removeAttr('disabled');
        }
    },
    
    onForgetFeedback: function(data) {
        // check status code
        switch (data.status) {
        case 0: // processing
            $('#forget_info').text(this.i18n('processing'));
            return;
        case 1: // db error
            $('#forget_info').text(this.i18n('system_error') + data.status);
            break;
        case 2: // invald user/email
        case 3: // invald user/email
            $('#forget_info').text(this.i18n('forget_error_invalid'));
            break;
        case 4: // not activated
            $('#forget_info').text(this.i18n('forget_error_inactive'));
            break;
        case 5: // mail error
        case 6: // db error
            $('#forget_info').text(this.i18n('system_error') + data.status);
            break;
        case 7: // ok
            $('#forget_info').text(this.i18n('forget_reset_password'));
            break;
        default:
            $('#forget_info').text(this.i18n('unknown_error'));
        }
        $('#forget_box input').removeAttr('disabled');
    },
    
    onCreate: function() {
        $('#create_box input').attr('disabled', 'disabled');
        $('#create_info').text('');
        
        // check inputs
        var user = $('#create_user').val();
        if (!this.check('user', user)) {
            $('#create_info').text(this.i18n('create_error_user'));
            $('#create_box input').removeAttr('disabled');
            return;
        }
        var pswd = $('#create_pass').val();
        var confirm = $('#create_conf').val();
        if (!this.check('pswd', pswd) || pswd !== confirm) {
            $('#create_info').text(this.i18n('create_error_pswd'));
            $('#create_box input').removeAttr('disabled');
            return;
        }
        var email = $('#create_mail').val().toLowerCase();
        if (!this.check('email', email)) {
            $('#create_info').text(this.i18n('create_error_mail'));
            $('#create_box input').removeAttr('disabled');
            return;
        }
        var sum = $('#create_rand_sum').val();
        if (parseInt(sum, 10) !== this.randsum) {
            $('#create_info').text(this.i18n('create_error_sum'));
            $('#create_box input').removeAttr('disabled');
            return;
        }
        
        this.getOS().getEvents().triggerEvent('wedata', {wedata: {
            type: 'accountcreate',
            user: user,
            pswd: top.Tian.md5(pswd),
            email: email,
            lang: top.Tian.Lang.getCode()
        }});
        
        this.resetRandSum();
    },
    
    onCreateFeedback: function(data) {
        // check status code
        switch (data.status) {
        case 0: // processing
            $('#create_info').text(this.i18n('processing'));
            return;
        case 1: // db error
            $('#create_info').text(this.i18n('system_error') + data.status);
            break;
        case 2: // user / email using
            $('#create_info').text(this.i18n('create_error_used'));
            break;
        case 3: // db error
            $('#create_info').text(this.i18n('system_error') + data.status);
            break;
        case 4: // mail error
            $('#create_info').text(this.i18n('system_error') + data.status);
            break;
        case 5:
            $('#create_info').text(this.i18n('create_activate_account'));
            break;
        default:
            $('#create_info').text(this.i18n('unknown_error'));
        }
        $('#create_box input').removeAttr('disabled');
    },
    
    onEdit: function() {
        $('#edit_box input').attr('disabled', 'disabled');
        
        // check inputs
        var pswd = $('#edit_pass').val(),
            confirm = $('#edit_conf').val();
        if (!this.check('pswd', pswd) || pswd !== confirm) {
            $('#edit_info').text(this.i18n('edit_error_pswd'));
            $('#edit_box input').removeAttr('disabled');
            return;
        }
        
        var account = this.getOS().getAccount();
        if (!account) {
            $('#edit_info').text(this.i18n('edit_error_illegal'));
            $('#edit_box input').removeAttr('disabled');
            return;
        }
        
        var wedata = {
            type: 'accountupdate',
            user: account.user,
            token: account.token,
            pswd: top.Tian.md5(pswd),
            lang: top.Tian.Lang.getCode()
        };
        
        this.getOS().getEvents().triggerEvent('wedata', {wedata: wedata});
    },
    
    onEditFeedback: function(data) {
        // check status code
        switch (data.status) {
        case 0: // processing
            $('#edit_info').text(this.i18n('processing'));
            return;
        case 1: // db error
            $('#edit_info').text(this.i18n('system_error') + data.status);
            break;
        case 2: // illegal account
            $('#edit_info').text(this.i18n('edit_error_illegal'));
            break;
        case 3: // not activated
            $('#edit_info').text(this.i18n('edit_error_inactive'));
            break;
        case 4: // token expired
            $('#edit_info').text(this.i18n('edit_error_token'));
            break;
        case 5:
            $('#edit_info').text(this.i18n('system_error') + data.status);
            break;
        case 6:
            $('#edit_pass, #edit_conf').val('');
            $('#edit_info').text(this.i18n('edit_updated'));
            break;
        default:
            $('#edit_info').text(this.i18n('unknown_error'));
        }
        $('#edit_box input').removeAttr('disabled');
    },
    
    onSocketWeData: function(event) {
        if (!event || !event.wedata) {
            return;
        }
        
        var data = event.wedata;
        switch (data.type) {
        case 'accountsignin':
            this.onSignInFeedback(data);
            break;
        case 'accountlogout':
            this.onSignOutFeedback(data);
            break;
        case 'accountforget':
            this.onForgetFeedback(data);
            break;
        case 'accountcreate':
            this.onCreateFeedback(data);
            break;
        case 'accountupdate':
            this.onEditFeedback(data);
            break;
        default:
        }
        //console.log(JSON.stringify(data));
    },
    
    CLASS_NAME: 'Account'
});

function tianMain(options) {
    return new Account(options);
}
</script>

<style type='text/css'>
body {
    font-size: 12px;
}
h3 {
    font-size: 14px;
}
p {
    padding: 0px;
    margin: 10px 0 0 0;
}

input[type=text],
input[type=password] {
    width: 300px;
    border: solid 1px gray;
}

input[type=button] {
    width: 150px;
}

div.box {
    border: none;
    margin: 0px;
    padding: 0px;
    display: none;
}

#logout_apps_label, #logout_devices_label, #logout_user_label, #logout_balance_label,
#logout_email_label, #logout_layers_label, #logout_features_label {
    float: left;
}
#logout_apps, #logout_devices, #logout_user, #logout_balance,
#logout_email, #logout_layers, #logout_features {
    float: right;
}
#logout_box p {
    clear: both;
}
#logout_box input {
    margin-top: 10px;
}
</style>

</head>
<body>
<div id='signin_box' class='box' >
    <h3 id='signin_header'></h3>
    <p>
        <label id='signin_user_label'></label><br />
        <input id="signin_user" type="text" value="" />
    </p>
    <p>
        <label id='signin_pass_label'></label><br />
        <input id="signin_pass" type="password" />
    </p>
    <p id='signin_info'></p>
    <p>
        <input id="signin_button" type="button" value="signin" />
        <input id='signin_forget' type="button" value="forget" />
        <input id='signin_create' type="button" value="create" />
    </p>
</div>

<div id='forget_box' class='box'>
    <h3 id='forget_header'></h3>
    <p>
        <label id='forget_user_label'></label><br />
        <input id="forget_user" type="text" value="" />
    </p>
    <p>
        <label id='forget_mail_label'></label><br />
        <input id="forget_mail" type="text" value="" />
    </p>
    <p id='forget_info'></p>
    <p>
        <input id="forget_button" type="button" value="forget" />
        <input id='forget_signin' type="button" value="signin" />
    </p>
</div>

<div id='create_box' class='box'>
    <h3 id='create_header'></h3>
    <p>
        <label id='create_user_label'></label><br />
        <input id="create_user" type="text" value="" />
    </p>
    <p>
        <label id='create_pass_label'></label><br />
        <input id="create_pass" type="password" value="" />
    </p>
    <p>
        <label id='create_conf_label'></label><br />
        <input id="create_conf" type="password" value="" />
    </p>
    <p>
        <label id='create_mail_label'></label><br />
        <input id="create_mail" type="text" value="" />
    </p>
    <p>
        <label><span id='create_rand_1'>?</span> <span id='create_method'>!</span> <span id='create_rand_2'>?</span> = ?</label><br />
        <input id="create_rand_sum" type="text" value="" />
    </p>
    <p id='create_info'></p>
    <p>
        <input id="create_button" type="button" value="create" />
        <input id='create_signin' type="button" value="signin" />
    </p>
</div>

<div id='logout_box' class='box'>
    <h3 id='logout_header'></h3>
    <p><span id=logout_user_label ></span><span id=logout_user ></span></p>
    <p><span id=logout_email_label ></span><span id=logout_email ></span></p>
    <p><span id=logout_balance_label ></span><span id=logout_balance ></span></p>
    <p><span id=logout_apps_label ></span><span id=logout_apps ></span></p>
    <p><span id=logout_devices_label ></span><span id=logout_devices ></span></p>
    <p><span id=logout_layers_label ></span><span id=logout_layers ></span></p>
    <p><span id=logout_features_label ></span><span id=logout_features ></span></p>
    <p id=logout_info></p>
    <p>
        <input id="logout_button" type="button" value="logout" />
        <input id='logout_edit' type="button" value="edit" />
    </p>
</div>

<div id='edit_box' class='box'>
    <h3 id='edit_header'></h3>
    <p>
        <label id='edit_mail_label'></label><br />
        <input id="edit_mail" type="text" value="" readonly="readonly" />
    </p>
    <p>
        <label id='edit_pass_label'></label><br />
        <input id="edit_pass" type="password" value="" />
    </p>
    <p>
        <label id='edit_conf_label'></label><br />
        <input id="edit_conf" type="password" value="" />
    </p>
    <p id='edit_info'></p>
    <p>
        <input id="edit_button" type="button" value="edit" />
        <input id="edit_cancel" type="button" value="cancel" />
    </p>
</div>
</body>
</html>
